<template>
  <view class="goods-container">
    <nav-bar></nav-bar>
    <view class="goods-inner">
      <image :src="goods.img" mode="" class="goods-img" />
      <view class="name">
        <view class="ch">{{ goods.name }}</view>
        <view class="en">{{ goods.french }}</view>
      </view>
      <view class="cont">
        <view class="tips">蛋糕若不及时食用，请放置冰箱冷冻室储存</view>
        <view class="desc">{{ goods.chineseBrief }}</view>
      </view>
      <view class="tabs">
        <view
          v-for="(item, index) in goods.list"
          :key="item.id"
          :class="{ item, 'tabs-active': selectIndex == index }"
          @click="selectIndex = index"
        >
          <view class="pound">{{ item.spec }}</view>
          <view class="weight">{{ item.weight }}</view>
          <view class="count">{{ item.edible }}</view>
        </view>
      </view>
      <u-cell-group border>
        <u-cell class="cell" :title="'￥' + selectItem.price"></u-cell>
        <u-cell class="cell" :title="selectItem.fittings"></u-cell>
        <u-cell
          class="cell"
          :title="
            selectItem.ahead + ' ' + selectItem.size + ' ' + selectItem.edible
          "
        ></u-cell>
      </u-cell-group>
      <view class="footer-control-cont">
        <view class="footer-control">
          <view class="add-cart" @click="addGoodsToCart">加入购物车</view>
          <view class="buy" @click="bug">立即购买</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getStorage, setStorage } from '../../utils/auth'
import { mapState } from 'vuex'
export default {
  name: 'goods-detail',
  data() {
    return {
      goods: {}, // 商品详情对象
      selectIndex: 0, // 选中tabs的索引
    }
  },
  computed: {
    ...mapState('user', ['userInfo']),
    selectItem() {
      return this.goods.list[this.selectIndex]
    },
  },
  methods: {
    // 添加商品到购物车
    async addGoodsToCart() {
      if (!this.userInfo) {
        return uni.showToast({
          title: '请先登录',
          duration: 2000,
          icon: 'none',
        })
      }
      // 手动的初始化数据
      this.$set(this.goods, 'selectItem', this.selectItem)
      this.$set(this.goods, 'isCheck', false)
      this.$set(this.goods, 'num', 1)

      // 从本地存储中拿购物车数据
      let cartList = []
      cartList = await getStorage('cartList')
      const isAddCart = cartList.some(item => item.id === this.goods.id)
      if (isAddCart) {
        return uni.showToast({
          title: '请勿重复添加同一件商品',
          duration: 2000,
          icon: 'none',
        })
      }
      cartList.push(this.goods)
      setStorage('cartList', cartList)
      uni.showToast({
        title: '加入购物车成功',
        duration: 2000,
        icon: 'none',
      })
    },
    bug() {
      uni.showToast({
        title: '该功能暂未开放',
        duration: 2000,
        icon: 'none',
      })
    },
  },
  onLoad() {
    try {
      const goods = uni.getStorageSync('goods')
      this.goods = goods
    } catch (e) {
      console.log(e)
    }
  },
}
</script>

<style lang="scss">
.goods-inner {
  .goods-img {
    width: 100%;
    height: 750rpx;
  }
  .name {
    text-align: center;
    line-height: 50rpx;
    background-color: $lxins-color-yellow;
    .ch {
      line-height: 60rpx;
      font-size: $lxins-fs-22;
    }
    .en {
      font-size: $lxins-fs-14;
    }
  }
  .cont {
    view {
      padding: 0 24rpx;
      border-bottom: 1px solid #ddd;
    }
    .tips {
      color: red;
      line-height: 72rpx;
      font-size: $lxins-fs-14;
    }
    .desc {
      font-size: $lxins-fs-12;
      color: #333;
      line-height: 44rpx;
    }
  }
  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .item {
      font-size: $lxins-fs-14;
      padding: 0 20rpx;
      text-align: center;
    }
    .tabs-active {
      border-bottom: 2px solid $lxins-color-yellow;
    }
  }
  .cell {
    font-size: $lxins-fs-14;
  }
  .footer-control-cont {
    height: 100rpx;
    .footer-control {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100rpx;
      display: flex;
      background-color: #fff;
      border-top: 1px solid #eee;
      line-height: 100rpx;
      view {
        flex: 1;
        text-align: center;
      }
      .buy {
        background-color: $lxins-color-yellow;
      }
    }
  }
}
</style>
